/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" } } */

<template>
	<view>

		<view :class="[isiPhone ? 'pb-180' : 'pb-140', 'order-page']">
			<view class="bage-co"></view>

			<view class="con">
				<view class="bar" :style="{ height: customBar + 'px' }"></view>
				<view class="relative z-index3">
					<u-navbar :title="pageTitle" leftIcon="arrow-left" bgColor="transparent" leftIconColor="#fff"
						@leftClick="leftClick" titleStyle="color:#fff"></u-navbar>
				</view>

				<view class="card-base-box">
					<view class="card-cont">
						<!-- <view class="wz">违章0</view> -->

						<view class="card-top flex-tbc">
							<view>
								<view class="chepai flex-tbc">
									{{details.car.code}}
									<text
										:class="[details.car.type.type == 2? 'text1':'text2']">{{details.car.type.type == 2? '蓝':'绿'}}</text>
								</view>
								<view class="che-leix">{{details.car.pin}}·{{details.car.type.name || ''}}</view>
							</view>

							<view class="jiashi-image">
								<image class="ww100 hh100" :src="getImage(details.car.images)" mode="aspectFill"
									@click="onPreviewImage(charInfo.images)">
								</image>
							</view>
						</view>

						<view class="info flex-tbc mt52">
							<view class="info1">
								年检时间
								<text class="ml10">{{getDate(details.car.y_day)}}</text>
							</view>

							<view class="info1 ml34">
								保险到期
								<text class="ml10">{{getDate(details.car.b_day)}}</text>
							</view>
						</view>
					</view>
				</view>


				<view class="box1 mt20">
					<view class="title-b">
						预约信息
					</view>
					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							预约门店
						</view>

						<view class="right">
							{{details.info.sname}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2" v-if="isDF == 1">
						<view class="le">
							代付客户
						</view>

						<view class="right">
							{{details.info.customer.nickname}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							上门取车
						</view>

						<view class="right">
							{{details.info.way == 0? '否': '是'}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							取车时间
						</view>

						<view class="right">
							{{details.info.day}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							取车地点
						</view>

						<view class="right">
							{{details.info.address}}
						</view>
					</view>


					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							订单费用
						</view>

						<view class="right">
							￥ {{getPrice(item)}} 
							<!-- <text style="font-size: 28rpx;" v-if="details.info.status == 5">（待补费：{{details.info.other_price}}）</text> -->
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2" v-if="details.info.other_ids">
						<view class="le">
							补缴说明
						</view>

						<view class="right">
							{{details.info.other_ids}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2" v-if="details.info.other_ids">
						<view class="le">
							补缴费用
						</view>

						<view class="right">
							{{details.info.other_price}}
						</view>
					</view>

				</view>

				<view class="box1 mt20">
					<view class="title-b">
						联系人
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							联系人姓名
						</view>

						<view class="right">
							{{details.info.name}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							联系人手机号
						</view>

						<view class="right">
							{{details.info.mobile}}
						</view>
					</view>
				</view>

				<view class="box1 mt20">
					<view class="title-b">
						其他
					</view>

					<view class="form-item mt2">
						<view class="le">
							其他资料
						</view>

						<view class="right mt16">
							<image class="img2" :src="item" mode="aspectFill"
								v-for="(item, index) in getimgList(details.info.images)" :key="index"
								@click="onImage(details.info.images, index)">
							</image>
						</view>
					</view>
				</view>



				<view class="box1 mt20">
					<view class="title-b">
						订单信息
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							订单编号
						</view>

						<view class="right flex-tbc" @click="onCopy(detail.info.order_sn)">
							{{details.info.order_sn}} <text class="ml10 mr10">|</text>
							<view class="btn-copy">
								复制
							</view>
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2">
						<view class="le">
							下单时间
						</view>

						<view class="right">
							{{details.info.createtime}}
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2" v-if="details.info.pay_time">
						<view class="le">
							付款时间
						</view>

						<view class="right">
							{{details.info.pay_time}}
							<!-- {{getDate(details.info.pay_time, 1)}} -->
						</view>
					</view>

					<view class="form-item flex-lr-tbc mt2" v-if="details.info.status == 3">
						<view class="le">
							完成时间
						</view>

						<view class="right">
							{{details.info.hx_time}}
							<!-- {{getDate(details.info.hx_time, 1)}} -->
						</view>
					</view>
				</view>
			</view>


		</view>

		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f display_flex justify-content_flex-end">
				<view class="btns-base display_flex justify-content_flex-end mt18">
					<view class="btn btn1 relative">
						联系客服
						<button open-type="contact" class="btn-c">

						</button>
					</view>


					<view class="btn btn1" v-if="details.info.status == 1  || details.info.status == 2"
						@click="btn.clearOrder">
						取消订单
					</view>

					<view class="btn btn2" v-if="details.info.status == 1" @click="btn.payOrder(0)">
						立即支付
					</view>

					<view class="btn btn2" v-if="details.info.status == 2" @click="btn.code">
						核销码
					</view>
					
					<view class="btn btn2" @click="btn.payOrder(1)" v-if="details.info.status == 5">
						补费支付
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 核销码 -->
	<v-code :show="isShowCode" @clear="isShowCode = false">
		<template #image>
			<image class="code-image wh414" :src="codeImage" mode=""></image>
		</template>
	</v-code>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import timeFormat from '@/utils/timeFormat.js'
	import vCode from '@/components/vCode.vue';
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const pageId = ref('')
	const isDF = ref('')

	const pageTitle = ref('')
	const details = ref({
		car: {
			type: {}
		},
		info: {
			customer: {}
		}
	})

	const statusBase = {
		1: '待支付',
		2: '已预约',
		3: '已完成',
		4: '已取消',
		5: '补费用'
	}

	const isShowCode = ref(false)
	const codeImage = ref('')

	const getDetail = async () => {
		const res = await $post('/user/order_info', {
			oid: pageId.value
		})
		details.value = res

		pageTitle.value = statusBase[details.value.info.status]

	}

	const getImage = (images) => {
		if (!images || images.length == 0) return ''
		if (typeof images == "string") {
			return images.split(',')[0]
		}

		return images[0]
	}
	const getDate = (time, type) => {
		if (time) {
			let formMat = 'yyyy年mm月dd日'
			if (type == 1) {
				formMat = 'yyyy-mm-dd hh:MM'
			}
			time = time.toString().replace(/-/g, '/')
			let time1 = new Date(time)
			return timeFormat(time1, formMat)
		} else {
			return ''
		}
	}

	const onPreviewImage = (images) => {
		const imgs = images.split(',')
		// 图片预览
		uni.previewImage({
			urls: imgs,
			current: 0
		})
	}


	const getimgList = (img) => {
		if (!img) return []
		return img.split(',')
	}

	const onImage = (img, index) => {
		uni.previewImage({
			urls: img.split(','),
			current: index
		})
	}
	const onCopy = (order) => {
		uni.setClipboardData({
			data: order,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			},
		})
	}
	const getPrice = () => {
		if(details.value.info.status == 3) {
			return Vue.jia(Number(details.value.info.pay), Number(details.value.info.other_price))
		} else {
			return details.value.info.pay
		}
	}

	const btn = {
		clearOrder() {
			uni.showModal({
				title: '提示',
				content: '确定取消订单吗？',
				//按钮颜色
				confirmColor: '#348B8A',
				success: function(res) {
					if (res.confirm) {
						$post('/stores/out_stores_order', {
							oid: pageId.value
						}).then(res => {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							getDetail()
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},

		async payOrder(type) {
			let status = await Vue.$pay(pageId.value, type)
			switch (status) {
				case 'success':
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					getDetail()
					break;
				case 'cancel':
					uni.showToast({
						title: '取消支付',
						icon: 'none',
						duration: 2000
					});
					break;
				case 'fail':
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					break;
			}

		},

		async code(item) {
			const env_version = uni.getStorageSync('envVersion')
			const res = await $post('/user/order_qrcode', {
				oid: item.id,
				env_version
			})

			codeImage.value = res.info
			isShowCode.value = true
		},

	}

	Vue.onShow(() => {
		initPage()
	})
	Vue.onLoad((options) => {
		pageId.value = options.id
		if (options.isDF) {
			isDF.value = options.isDF
		}
		getDetail()
	})
</script>
<style scoped lang='scss'>
	.bage-co {
		width: 100%;
		height: 384rpx;
		background: #348b8a;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.con {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.card-base-box {
		height: auto !important;
	}

	.card-cont {
		width: 702rpx;
		height: 276rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(0, 0, 0, 0.09);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto 0;
		padding: 48rpx 0 0 !important;

		.card-top {
			margin-top: 0 !important;
		}

		.info {
			border-top: 1rpx solid #e0e0e0;
			padding-top: 18rpx;
		}
	}

	.box1 {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 32rpx 0;

		.title-b {
			font-family: OPPOSans, OPPOSans;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
			padding: 20rpx 24rpx;
		}
	}

	.img2 {
		width: 164rpx;
		height: 156rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 12rpx;
		margin-right: 10rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}

	}

	.btn-copy {
		color: #348B8A;
	}
</style>